<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>File 对象</title>
    <style>
        .thum__img {
            width: 100px;
            height: 100px;
            border: 10px white solid;
        }
    </style>
</head>
<body>
    <input type="file" id="file" multiple/>
    <p>
        <button onclick="showFile()">Get Data</button>
    </p>
    <p class="fileMsg">

    </p>
    <p class="thumbnail">

    </p>
    <a href="https://developer.mozilla.org/zh-CN/docs/Web/API/File">资料参考网址1</a>
    
    <script>
        /**
         * File 能够提供有关文件的信息，并允许js访问其内容
         * 
         * File是特殊的Blob对象，因此所以可以使用 Blob 的上下文中都可以使用 File
         * 比如：FileReader,window.URL.createObjectURL,XMLHttpRequest.send( XMLHttpRequest 2.0 中可以发送 文件 Blob/File )
         * 
         * File 对象是来自用户在一个 <input> 元素上选择文件后返回的 FileList 对象,
         * 也可以是来自由拖放操作生成的 DataTransfer 对象，
         * 或者来自 HTMLCanvasElement 上的 mozGetAsFile() API (mozGetAsFile 可以将 canvas 变成一个 File 文件)
         * 
         * */
        function showFile() {

            const fileList = document.getElementById('file').files

            let File = new File() // 构造函数，返回一个文件对象

            /**
             * File 对象的属性
             * name
             * size
             * type
             * lastModified
             * lastModifiedDate
             * webkitRelativePath
             * 
             * */
            let str = ''
            for (let item of fileList) {
                str += `文件名：${item.name} 
                    <br/>
                    文件大小：${item.size}
                    <br/>
                    文件类型：${item.type}
                    <br/>
                    最后修改时间：${item.lastModifiedDate}
                    <p></p>
                `

                // item.slice(start, end, contentType) 对文件数据进行切割，返回一个Blob对象
                item = item.slice(0, 100, `${item.type}`)

                // 添加预览
                const img = document.createElement('img')
                img.classList.add('thum__img')
                let url = URL.createObjectURL(item) // window.URL.createObjURL(file/blob) 返回 该文件对象 的 url
                img.src = url
                document.getElementsByClassName('thumbnail')[0].appendChild(img)
            }
            document.getElementsByClassName('fileMsg')[0].innerHTML = str

        }
    </script>
</body>
</html>